<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/laypage.css">
<script src="/js/vue/vue.min.js"></script>
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/laypage/laypage.js" charset="utf-8"></script>
<script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>

<div id="app" class="container">		
<h2>欢迎你${Session.User.oaDept.deptName}部门的${Session.User.userUsername}</h2><hr><br>
<input type="hidden" name="userLevle"  id="userLevle" value="${Session.User.userLevle}" >
<input type="hidden" name="oaDept.deptId" id="did"  value="${Session.User.oaDept.deptId}" >
<h4><a href="/OaBuy/test" id="xinzeng" >新增多条申请</a><br><br></h4>

		<form class="form-inline bg-danger" role="form">			
		<h4>  查询条件：<br><br>
		 
		   申请部门：
          <select id="deptid">
             <option value="0">--请选择--</option>
           <#list deptList as dept>
              <option value="${dept.deptId}">${dept.deptName}</option>
           </#list>
     </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       
      
              申请状态：
          <select id="submitd">
              <option value="0">--请选择--</option>
           <#list listsub as sub>
              <option value="${sub.submitId}">${sub.submitState}</option>
           </#list>
     </select></h4>
  
     
     		  
		  <div class="form-group">
		    物品名称
		    <input type="text" class="form-control" id="buyName" placeholder="物品名称">
		  </div>
		   &nbsp; &nbsp;
		  <div class="form-group">
		    用&nbsp; &nbsp;途
		    <input type="text" class="form-control" id="buyUse" placeholder="用途">
		  </div>
		  &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
		  <div class="form-group">
		    申&nbsp;请&nbsp;人
		    <input type="text" class="form-control" id="userUsername" placeholder="申请人">
		  </div>
		   <br>
		   <div class="form-group">
		    最小单价
		    <input type="text" class="form-control" id="buyPriceMin" placeholder="单价最小值">
		  </div>
		  
		  <div class="form-group">
		   最大单价
		    <input type="text" class="form-control" id="buyPriceMax" placeholder="单价最大值">
		  </div>
		 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
		   <div class="form-group">
		    最小数量
		    <input type="text" class="form-control" id="buyNumberMin" placeholder="数量最小值">
		  </div>
		  
		  <div class="form-group">
		   最大数量
		    <input type="text" class="form-control" id="buyNumberMax" placeholder="数量最大值">
		  </div>
		   <br>
		   <div class="form-group">
		      申请开始时间：
		    <input type="text" class="form-control" id="buyDateMin" placeholder="如：2017-01-17">
		  </div>
		 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
		  <div class="form-group">
		     终止时间：
		    <input type="text" class="form-control" id="buyDateMax" placeholder="如：2017-01-17">
		  </div>
		  <br>
		   <div class="form-group">
		    使用起始时间：
		    <input type="text" class="form-control" id="buyUseDateMin" placeholder="如：2017-01-17">
		  </div>
		  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
		  <div class="form-group">
		  起始时间：
		    <input type="text" class="form-control" id="buyUseDateMax" placeholder="如：2017-01-17">
		  </div>
		  <button type="button" id="findOaBuy" class="btn btn-success">查询申请</button>
		  <button type="button" id="addOaBuyBtn" class="btn btn-danger">增加申请</button>
		</form>
		
		
		
		
		<div class="table-responsive">	
		<br>
		<table  border="1px" class="table">
             <tr class="success">
                <td>序列</td>
                <td>申请部门</td>
                <td>物品名称</td>
                <td>物品单价</td>
                <td>申请数量</td>
                <td>总价</td>
                <td>用途</td>
                <td>申请日期</td>
                <td>使用日期</td>
                <td>申请人</td>
                <td>申请状态</td>
                <td name="eidt">操作</td>
              </tr>
       
              <tr class="active" v-for="(oaBuy,index) in result">
                 <td>{{index+1}}</td>
                 <td>{{oaBuy.oaDept.deptName}}</td>
                 <td>{{oaBuy.buyName}}</td>
                 <td>{{oaBuy.buyPrice}}</td>
                 <td>{{oaBuy.buyNumber}}</td>
                 <td>{{oaBuy.buyNumber*oaBuy.buyPrice}}</td>
                 <td>{{(oaBuy.buyUse)}}</td>
                 <td>{{oaBuy.buyDate}}</td>
                 <td>{{oaBuy.buyUseDate}}</td>
                 <td>{{oaBuy.oaUser.userUsername}}</td>
                 <td>{{oaBuy.oaSubmit.submitState}}</td>
                 <td name="eidt">
                 <a href="#" @click="delEvent(oaBuy.buyId)">删除</a>
                 <a href="#" @click="editEvent(oaBuy.buyId)">编辑</a>     
                     
                  </td>
               </tr>

              <tr>
				<td colspan="12" align="right"><div id="pagenav"></div></td>
			</tr>	
             </table>
		
		</div>	
</div>
<script>

		var app = new Vue({
			el : '#app',
			data : {
				result : []
			}
		});
	
	
		//查询用户数据
		var getUserPageList = function(curr) {
			$.ajax({
				type : "GET",
				dataType : "json",
				url : "/OaBuy/getPage",
				data : {
					pageNum:curr || 1,
					pageSize:5,
					deptid:$("#deptid").val(),
					submitid:$("#submitd").val(),
					buyName:$("#buyName").val(),
					buyUse:$("#buyUse").val(),
					userUsername:$("#userUsername").val(),
					
					buyPriceMin:$("#buyPriceMin").val(),
					buyPriceMax:$("#buyPriceMax").val(),
					
					buyNumberMin:$("#buyNumberMin").val(),
					buyNumberMax:$("#buyNumberMax").val(),
					
					buyDateMin:$("#buyDateMin").val(),
					buyDateMax:$("#buyDateMax").val(),
					
					buyUseDateMin:$("#buyUseDateMin").val(),
					buyUseDateMax:$("#buyUseDateMax").val(),
					
					
					
					
					
				},
				success : function(msg) {
				
					app.result=msg.page;
					
					laypage({
						cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
						pages : msg.totalPage, //总页数
						first : '首页',
						last : '尾页',
						curr : curr || 1, //当前页

						jump : function(obj, first) { //触发分页后的回调

							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
							
								getUserPageList(obj.curr);
								
							}
						}
					});				
					
				}
			});
		}
		
		getUserPageList();



	//查询用户事件

		$('#findOaBuy').on('click', function() {
			getUserPageList();
		});
		
		$("#submitd").change(function(){
            getUserPageList();
          });
          
          	$("#deptid").change(function(){
            getUserPageList();
          });
          
          
          
          //增加申请事件

		$('#addOaBuyBtn').on('click', function() {			
			layer.open({
				type : 2,
				title : '物品申购单',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '600px', '800px' ],
				content : '/OaBuy/adds',
				end : function() {
					getUserPageList();
				}
			});
			
		});
		
		
		//删除用户事件
		var delEvent = function(id) {
			//询问框
			layer.confirm('您确定要删除么？', {
				btn : [ '是', '否' ]
			//按钮
			}, function() {
					//是
					$.ajax({
						type : "GET",
						dataType : "json",
						url : "/OaBuy/del",
						data : {
							buyId:id
						},
						success : function(msg) {
							getUserPageList();
							layer.msg('已经成功删除记录' + id,{icon:5});
						}
					});
	
			}, function() {
				//否

			});
		}
		
		//编辑用户事件
		
		var editEvent = function(id) {
			layer.open({
				type : 2,
				title : '编辑用户',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '600px', '800px' ],
				content : '/OaBuy/editpage?buyId='+id,
				
				end : function() {
					getUserPageList();
				}
			});
		}
				
		
</script>

</body>
</html>

	


